<% layout('layout/layout') %>
<% block('header').append(`<style>
  .tab-pane > ul{
     list-style: none;
    padding: 10px 0 0 0;
    margin: 0;
  }
  .tab-pane li.order_item {
    border-top:1px solid #e3e3e3;
    border-bottom:1px solid #e3e3e3;
    margin-top:10px;
  }
  .tab-pane  li.order_item .order_item_header {
    background:#f0f0f0;
    height:34px;
    line-height: 34px;
  }
  .good_sub_img_ul {
  list-style:none;
  padding:5px;
  display:block;
  margin-bottom:0;
}
.good_sub_img_item {
  float:left;
  width:80px;
  height:80px;
  border:1px solid #e3e3e3;
  margin-right:5px;
}
.good_sub_img_item img{
max-width:100%;
}
</style>`) %>
<div class="container">
    <ol class="breadcrumb">
        <li><a href="/">首页</a></li>
        <li><a href="/account/index">用户中心</a></li>
        <li class="active"><%= title %></li>
    </ol>
    <div class="row">
        <div class="col-md-3  col-xs-3">
            <% include ../navbar/accountLeftNav.ejs %>
        </div>
        <div id="orderManageWrap" class="col-md-9  col-xs-9">

            <div class="panel panel-default ">
                <div class="panel-body no-padding" style="min-height:300px;">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-type="all" data-toggle="tab">全部订单</a></li>
                        <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-type="waitPay" data-toggle="tab">待付款</a></li>
                        <li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-type="pay" data-toggle="tab">待发货</a></li>
                        <li role="presentation"><a href="#tab4" aria-controls="tab4" role="tab" data-type="ship" data-toggle="tab">已发货</a></li>
                        <li role="presentation"><a href="#tab4" aria-controls="tab4" role="tab" data-type="back" data-toggle="tab">已完成</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content" style="background:#FFF;min-height:300px;">
                        <div role="tabpanel" class="tab-pane active" id="tab1"></div>
                        <div role="tabpanel" class="tab-pane" id="tab2"></div>
                        <div role="tabpanel" class="tab-pane" id="tab3"></div>
                        <div role="tabpanel" class="tab-pane" id="tab4"></div>
                    </div>
                    <div class="padding-h" style="height: 66px;">
                        <div class="j_pager" data-ajax="true" data-page="1" data-count="10" ></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<% block('footer').append(`<script src="/js/jPager.js" ></script>`); %>
<% block('footer').append(`<script id="itemTpl" type="text/template" >
<ul>
<@ _.each(orders,function(item) { @>
    <li class="order_item">
        <div class="order_item_header padding-left15">
            下单时间：<@=item.create_time @>
            <span class="padding-left20">订单号：<@=item.orderId @></span>
        </div>
        <div class="order_item_body">
            <div class="clearfix" >
                <div class="col-md-6  col-xs-6">
                  <ul class="good_sub_img_ul clearfix">
                    <@ _.each(item.goods, function(sub) { @>
                    <li class="good_sub_img_item" style="background:url('<@=sub.imgTmb @>') no-repeat;background-size:cover;"></li>
                    <@ })@>
                  <ul>
                </div>
                <div class="col-md-1  col-xs-1 text-center no-padding">
                   <p class="fs12  text-muted" style="padding-top: 35px; line-height: 20px;">共<@=item.totalNum @>件商品</p>
                </div>
                <div class="col-md-1  col-xs-1 text-center no-padding">
                   <p  class="status_txt <@=item.statusColor @>" style="padding-top:35px;"><@=item.statusName @><p>
                </div>
                <div class="col-md-2  col-xs-2 text-center padding-top20" style="height:90px;border-left:1px solid #e3e3e3;border-right:1px solid #e3e3e3">
                  <p class="fs16 bold">￥<@= item.needPrice @></p>
                  <span class="fs12 text-muted"> (含运费：￥<@=item.feePrice @>)</span>
                </div>
                <div class="col-md-2  col-xs-2 text-center ">
                    <p style="padding-top:15px;">
                      <a class="btn btn-link" href="/account/orderDetail/<@=item._id @>">查看详情</a>
                      <@ if(item.orderStatus === 10) { @>
                      <a class="btn btn_cancel btn-link normal_link" href="/account/orderCancel/<@=item._id @>">取消订单</a>
                      <@ } @>
                    </p>
                </div>
            </div>
        </div>
    </li>
<@ }) @>
</ul>
</script>`); %>
<% block('footer').append(`<script>
jQuery(function () {
	var itemTplCompile= _.template($("#itemTpl").html())
	var $curr = $('#tab1')
	var currType = 'all'
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    	var $this = $(e.target)
      var tab = $this.attr('href')
      currType =$this.data('type')
      $curr= $(tab)
      $('.j_pager').pager('draw',1)
    })
    function getData($curr,page) {
      $curr.empty()
      $.post('/account/orderManage', {page:page, orderType: currType}).done(function(res) {
        var resData = res.data
        $('.j_pager').pager('setCount',{count:resData.count,page:page})
        $curr.append(itemTplCompile({orders:resData.orders}))
      })
    }
    $('.j_pager').pager({
      callback:function (p) {
        console.log($curr)
        getData($curr, p)
        console.log('页面变化', p)
      }
    })
    $('#orderManageWrap').on('click','.btn_cancel',function(e){
      e.preventDefault()
      var $this = $(this)
      $.confirm('你确定要取消这个订单么','提示',function(res) {
      	if(res) {
          $.post($this.attr('href')).done(function(res){
          	console.log(res)
          	$this.closest('.order_item_body').find('.status_txt').text('已取消')
          })
      	}
      })
    })

})
</script>`) %>